<template>
  <div>
    {{ arr }}
    <button @click="addAll">add</button>
    <div>
      {{ cat }}
      <button @click="chageCat">chat</button>
    </div>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App'
  })
</script>
<script lang="ts" setup>
  import {reactive,ref} from 'vue'

  let arr=reactive<number[]>([1,2,3])

  const addAll=()=>{
    //一旦reative创建的数据是被替换的,则不再拥有响应式
    arr=arr.map((item)=>item+1)
  }

  //ref创建的数据被替换的时候,替换的是ref对象的value属性,具有响应式
  const cat=ref({
    name:"xiaomimi",
    age:5
  })

  const chageCat=()=>{
    cat.value={name:"damimi",age:3}
  }
  /* class RefImpl{
  //当ref对象被实例化的时候,就会把拿到的数据放在实例化对象的value属性上
  //当拿到的数据是基本类型值的时候,就直接放在了value属性上
  //当拿到的数据是对象类型值的,就会先创建当前对象的代理对象,然后再放在value属性上
  constructor(n){
    this.value = n
  }
  //RefImpl类有两个方法分别是getter和setter
  //当value属性的值被获取的时候,就会调用getter方法收集依赖
  //当value属性的值被设置的时候,就会调用setter方法通知依赖更新
  getter(){}
  setter(){}
} */
</script>

<style lang="less" scoped>
  
</style>